<template>
    <div>
<!--        数据统计-->
        <div class="dataTJ">
            <div class="dataTop"><h3 class="data_title">数据统计</h3></div>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                        <div class="left">
                            <div class="iconfont icon-overview"></div>
                            <p>{{tJData.totalroom}}</p>
                        </div>
                        <div class="right">房源数</div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="always">
                        <div class="left">
                            <div class="iconfont icon-renshu"></div>
                            <p>{{tJData.tenant}}</p>
                        </div>
                        <div class="right">租客数</div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="always">
                        <div class="left">
                            <div class="iconfont icon-empty"></div>
                            <p>{{tJData.empty}}</p>
                        </div>
                        <div class="right">空房数</div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="always">
                        <div class="left">
                            <div class="iconfont icon-woyaochuzu"></div>
                            <p>{{tJData.occupancyRate}}</p>
                        </div>
                        <div class="right">出租率</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="dataCenter">
            <el-row>
<!--                房源状态-->
                <el-col :span="6">
                    <div class="dataTop">
                        <h3 class="data_title">房源状态</h3>
                        <div class="stateArea">
                            <el-cascader
                                    v-model="stateArea"
                                    :options="stateOptions"
                                    :props="{ expandTrigger: 'hover' }"
                                    :show-all-levels="false"
                                    @change="checkoutState">
                            </el-cascader>
                        </div>
                    </div>
<!--                    饼状图-->
                    <div class="houseStates" ref="houseStates"></div>
                </el-col>
<!--                销售统计-->
                <el-col :span="18">
                    <div class="dataTop">
                        <h3 class="data_title">销售统计</h3>
                        <el-select v-model="saleValue" placeholder="请选择" @change="saleCheckout">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="saleTj" ref="saleTj"></div>
                </el-col>
            </el-row>
        </div>
        <!--租客排行-->
        <div class="orderTj">
            <div class="dataTop">
                <h3 class="data_title">租客排行</h3>
                <div>
                    <el-cascader
                            v-model="paiHang"
                            :options="paiOptions"
                            :props="{ expandTrigger: 'hover' }"
                            :show-all-levels="false"
                            @change="handleChange">
                    </el-cascader>
                </div>
            </div>
            <el-card>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        height="220px">
                    <el-table-column
                            label="区域排名"
                            align="center"
                            >
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="区域编号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="areaName"
                            label="区域名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="reserve"
                            label="租客预定数"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="tenant"
                            label="租客数"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="区域销售额"
                            align="center">
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<script>
    import allRouter from "../../router/allRouter";
export default {
    name: "home",
    data(){
        return {
            tJData:{},    //统计数据数组
            stateArea:'',  //筛选房源状态的默认区
            options:'',    //销售统计年数组
            houseState:[],   //房源状态百分比数组
            stateOptions:[],   //筛选房源状态的区
            paiOptions:[],  //租客排行市年数组
            paiHang:[], //租客排行默认值
            saleValue:'', //销售统计默认值
            saleDate:[],//销售数据
            tableData: []  //租客排行数据
        }
    },
    mounted() {
        //获取统计数据
        this.getTjData();
        this.getStatesShiQu();
        this.getPaiShiQu();
        this.getAllYear();
    },
    methods:{
        //绘制房源状态图
        drawHouseStates(){
            var myChart = this.$echarts.init(this.$refs.houseStates);
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '90%',
                    left: 'center'
                },
                color : [ '#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437' ],
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '45%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal : {
                                //饼形图显示格式
                                formatter : '{b|{b}}  {per|{d}%}  ',
                                rich : {
                                    b : {
                                        color : '#545454',
                                        fontSize : 14,
                                        lineHeight : 33
                                    },
                                    //设置百分比数字颜色
                                    per : {
                                        color : '#00B4FB',
                                        fontSize : 14,
                                        padding : [ 2, 4 ],
                                        borderRadius : 2
                                    }
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 35,
                            length2: 10,
                        },
                        itemStyle:{
                            borderWidth:3,
                            borderColor:'#fff',
                        },
                        data: this.houseState
                    }
                ]
            };
            if(option && typeof option === 'object'){
                myChart.setOption(option);
            }
        },
        //绘制柱形图
        drawSaleTj(){
            var myChart = this.$echarts.init(this.$refs.saleTj);
            var option = {
                color:['#3AA1FF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#545454',  //更改坐标轴文字颜色
                                fontSize : 14      //更改坐标轴文字大小
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#545454',  //更改坐标轴文字颜色
                                fontSize : 14      //更改坐标轴文字大小
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.saleDate
                    }
                ]
            };
            if(option && typeof option === 'object'){
                myChart.setOption(option);
            }
        },
        //获取统计数据
        getTjData(){
            this.$axios.post('/api/'+ allRouter.home.getTjData).then(res=>{
                this.tJData = res.data.data
            }).catch(err=>{
                console.log(err)
            })
        },
        //切换租客排行数据
        handleChange(value) {
            this.getPaiData(value);
        },
        //获取租客排行数据
        getPaiData(val){
            this.$axios.post('/api/'+allRouter.home.getPaiData,{
                year:val[0],
                city:val[1]
            }).then(res=>{
                this.tableData = res.data.data;
            }).catch(err=>{
                console.log(err)
            })
        },
        //切换房源状态
        checkoutState(value){
            this.getHouseStates(value[1]);
        },
        //获取房源状态
        getHouseStates(val){
            this.$axios.post('/api/'+allRouter.home.getHouseStates,{
                area:val
            }).then(res=>{
                this.houseState = res.data.data;
                //绘制房源状态图
                this.drawHouseStates();
            }).catch(err=>{
                console.log(err);
            })
        },
        //获取房源状态的市区
        getStatesShiQu(){
            this.$axios.post('/api/'+allRouter.home.getStatesShiQu).then(res=>{
                var data = res.data.data;
                for(var i=0;i<data.length;i++){
                    this.updateKey(data[i],'area','children');
                }
                for(var i=0;i<data.length;i++){
                    this.ergodicArr(data[i])
                }
                this.stateOptions = data;
                console.log(this.stateOptions);
                this.stateArea = this.stateOptions[0].children[0].value;
                this.getHouseStates(this.stateArea)
            }).catch(err=>{
                console.log(err)
            })
        },
        //获取区域租客排行的年市
        getPaiShiQu(){
            this.$axios.post('/api/'+allRouter.home.getPaiShiQu).then(res=>{
                var data = res.data.data;
                for(var i=0;i<data.length;i++){
                    this.updateKey(data[i],'year','label');
                    data[i].value = data[i].label;
                    this.updateKey(data[i],'city','children');
                }
                for(var i=0;i<data.length;i++){
                    if(data[i].children){
                        var arr = [...data[i].children];
                        data[i].children =[];
                        for(var j=0;j<arr.length;j++){
                            var obj = {};
                            obj.label = arr[j];
                            obj.value= arr[j];
                            data[i].children.push(obj);
                        }
                    }
                }
                this.paiOptions = data;
                console.log(this.paiOptions);
                this.paiHang.push(this.paiOptions[0].value);
                this.paiHang.push(this.paiOptions[0].children[0].value);
                this.getPaiData(this.paiHang);

            }).catch(err=>{
                console.log(err)
            })
        },
        //获取销售统计的所有年份
        getAllYear(){
            this.$axios.get('/api/'+allRouter.home.getAllYear).then(res=>{
                var data = res.data.data;
                var arr = [...data];
                data =[];
                for(var j=0;j<arr.length;j++){
                    var obj = {};
                    obj.label = arr[j];
                    obj.value= arr[j];
                    data.push(obj);
                }
                this.options = data;
                 this.saleValue = this.options[0].value;
                this.getSaleData(this.saleValue);
            }).catch(err=>{
                console.log(err);
            })
        },
        //切换销售统计
        saleCheckout(){
            this.getSaleData(this.saleValue);
        },
        //获取销售统计数据
        getSaleData(val){
            this.$axios.post('/api/'+allRouter.home.getSaleData,{
                year:val
            }).then(res=>{
                var data = res.data.data;
                for(var i=0;i<data.length;i++){
                    this.saleDate.push(data[i].money);
                }
                //绘制柱形图
                this.drawSaleTj();
            }).catch(err=>{
                console.log(err);
            })
        },
        //修改键名
        updateKey(data,preKey,updateKey){
            for (let key in data) {
                if (key == preKey) {
                    data[updateKey] =  data[key];  //在对象中添加了myId键名,并把当前key值赋值给了myId
                    delete data[key]; //删除当前键名为id的属性
                }
            }
        },
        ergodicArr(arr){
            this.updateKey(arr,'name','label');
            arr['value'] = arr['label'];
            if(arr.children){
                for(var i=0;i<arr.children.length;i++){
                    this.ergodicArr(arr.children[i])
                }
            }
        }
    }
}
</script>

<style scoped>
    /*数据统计*/
    .el-row{
        margin: 0 !important;
        padding: 0  !important;
    }
    .dataTop{
        width: 100%;
        overflow: hidden;
        padding-right: 30px;
        padding-left: 15px;
        box-sizing: border-box;
    }
     /deep/h3.data_title{
         margin-bottom: 10px;
         float: left;
     }
     .dataTop>div{
         float: right;
         width: 130px;
         margin-bottom: 10px;
         color: #333333;
     }
    .dataTJ{
        margin-bottom: 35px;
    }
    .dataTJ .el-col{
        width: calc((100% - 30px*3)/4);
        margin-right: 30px;

    }
    /deep/.dataTJ .el-card__body{
        overflow: hidden;
        padding: 0;
    }
     .dataTJ .el-col:last-child{
         margin-right: 0px;
     }
/*    卡片*/
    .dataTJ .el-card{
        overflow: hidden;
        box-sizing: border-box;
        padding: 22px 25px;
    }
    .dataTJ .left{
        float: left;
        overflow: hidden;
    }
    .dataTJ .right{
        float: right;
    }
    .dataTJ .left div{
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 50%;
        background-color: #FDD356;
        color: white;
        font-size: 35px;
        font-weight: 400;
        float: left;
    }
    .dataTJ .left p{
        color: #FDD356;
        font-weight: 600;
        font-size: 55px;
        margin-left: 20px;
        float: left;
        line-height: 70px;
    }
    .dataTJ .right{
        color: #999999;
        font-weight: 600;
        font-size: 22px;
        line-height: 70px;
    }
    .dataTJ .el-col:nth-child(2) .left div{
        background-color: #FE7B85;
    }
    .dataTJ .el-col:nth-child(2) .left p{
        color: #FE7B85;
    }
    .dataTJ .el-col:nth-child(3) .left div{
        background-color: #7FAAFB;
    }
    .dataTJ .el-col:nth-child(3) .left p{
        color: #7FAAFB;
    }
    .dataTJ .el-col:nth-child(4) .left div{
        background-color: #5ADA80;
    }
     .dataTJ .el-col:nth-child(4) .left p{
         color: #5ADA80;
     }

    /*房源状态图*/
    .dataCenter{
        margin-bottom: 35px;
    }
    .houseStates{
        width: 100%;
        height: 350px;
    }
    .saleTj{
        width: 100%;
        height: 350px;
    }
    /deep/.el-table__header-wrapper{
        color: #666666;
    }
    /deep/table .el-table__row:nth-child(2n-1){
        color: #FB979E;
    }
    /deep/table .el-table__row:nth-child(2n){
        color: #A0C0FD;
    }
</style>
